<!--铺位价格-->
<template>
    <div>
        <v-header :title="title">
            <div slot="left" class="backs_icon"></div>
        </v-header>
        <div class="main_allScroll">
            <checklist style="color: #999;font-size: 17px" :options="commonList" label-position="left" :min="1" :max="1" :required="true" @on-change="change" v-model="checks"></checklist>
            <div class="foot_add content">
                <div slot="left" >
                    <button :disabled="disabled !== ''" class="btns" :class="disabled" v-on:click="gotoPage">去支付</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {Checklist} from 'vux'
    import {mapActions, mapState} from 'vuex'
    import {SETCONFIG} from "store/config";

    export default {
        components:{
            Checklist
        },
        activated(){
            this.configManage()//获取配置信息
            this.init();
        },
        deactivated(){
        },
        name: 'rentPay',
        data(){
            return {
                disabled:'',
                commonList: [
                    {key: '1', value: '月'},
                    /*{key: '2', value: '年'}*/],
                checks: ['1'],
                renew: false,
                type: 1,
                title: ''
            }
        },
        methods:{
            ...mapActions([SETCONFIG]),
            change(value,label){
                this.checks = value;
            },
            changeTitle(){
                if(this.renew){
                    if(this.type == 1){
                        this.title = '店铺续费'
                    } else if(this.type == 2) {
                        this.title = '仓库续费'
                    }
                } else {
                    if(this.type == 1){
                        this.title = '我的店铺'
                    } else if(this.type == 2) {
                        this.title = '我的仓库'
                    }
                }
            },
            configManage(){
                this.$ajax.finance.configManage()
                    .then((res)=>{
                        for(let item in res.body.content){
                            if(item != 'drawbackAccountBank' && item != 'drawbackAccountName' && item != 'drawbackAccountNumber'  && item != 'rentOrRenewDepot' && item != 'rentOrRenewShop' ){
                                res.body.content[item] = Number(res.body.content[item])
                            }
                        }
                        this.SETCONFIG(res.body.content);
                    })
                    .then(()=>this.handleRent())
            },
            init(){
                if(this.$route.query.renew && this.$route.query.renew === '1'){
                    this.renew = true
                } else {
                    this.renew = false
                }
                this.type = this.$route.query.type
                this.disabled = '';
                this.changeTitle()
            },
            handleRent(){
                let arr
                if(this.type == 1){
                    let str = JSON.parse(JSON.stringify(this.config.rentOrRenewShop))
                    arr = str.split(',')
                } else{
                    let str = JSON.parse(JSON.stringify(this.config.rentOrRenewDepot))
                    arr = str.split(',')
                }
                this.commonList = []
                arr.forEach((v,i)=>{
                    var obj = {}
                    obj.key = v
                    var vStr = JSON.parse(JSON.stringify(v))
                    obj.value = '￥' + vStr.split('/')[0] + '/' + vStr.split('/')[1] + '天'
                    this.commonList.push(obj)
                })
                setTimeout(()=>this.checks = [this.commonList[0].key],10)
            },
            gotoPage(){   //支付
                this.$router.push({path:'/my/shop/rentpay',query:{
                        type : this.$route.query.type,
                        type1:this.checks[0],
                        renew: this.renew ? '1': null
                    }})
            },
        },
        watch:{
            'checks':function () {
                if(this.checks.length == 0){
                    this.disabled = 'disabled'
                }else{
                    this.disabled = ''
                }
            }
        },
        computed: mapState({config: state => state.config})
    }
</script>
<style lang="less" scoped>
    @import "css/pay";
</style>